<template>
	<view id="myChart" class="chart"></view>
</template>

<script>
	import * as echarts from 'echarts';

	export default {
		name: 'money-chart',
		props: ['chartD'],
		data() {
			return {}
		},
		methods: {
			drawLine() {
				let numName = '订单数量'
				let moneyName = '总交易金额'

				let myChart = echarts.init(document.getElementById('myChart'))
				let option = {
					title: {
						show: false
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: [moneyName, numName]
					},
					xAxis: {
						data: this.chartD.categories
					},
					yAxis: [{
							name: `${numName}/单`,
							type: 'value',
							minInterval: 1
						},
						{
							name: `${moneyName}/元`,
							type: 'value'
						}
					],
					grid: [{
						bottom: '6%',
						left: '4%',
						right: '4%'
					}],
					series: [{
						name: moneyName,
						type: 'bar',
						barMaxWidth: 40,
						data: this.chartD.money,
						yAxisIndex: 1,
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
										offset: 0,
										color: 'rgba(96, 200, 255, 0.9)'
									},
									{
										offset: 1,
										color: 'rgba(33,115,220,0.9)'
									},
								]
							}
						}
					}, {
						name: numName,
						type: 'line',
						data: this.chartD.num,
						itemStyle: {
							color: '#67C23A'
						}
					}]
				}
				myChart.setOption(option)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chart {
		width: 100%;
		height: 360px;
		background-color: #FFFFFF;
	}
</style>
